<script setup lang="ts">
import {
  reactive,
  onMounted,
  ref,
  // getCurrentInstance,
  toRefs
} from 'vue';
import { fetchPage } from '@/framework/api/systemManage/systemUser/hrPosition';
import { hrPosition } from '@/framework/api/systemManage/systemUser/hrPosition/types';
import dtDialog from '@/framework/components/dt-dialog/index.vue';
import ProTable from '@/framework/components/ProTable/index.vue';
import { ColumnProps } from "@/framework/components/ProTable/interface";
// const { proxy }: any = getCurrentInstance();
// const dataForm = ref()
const state = reactive({
  loading: false,
  total: 0,
  dialogFormVisible: false,
  positionList: [] as hrPosition[],
  temp: {} as hrPosition,
  dialogStatus: 'create',
  textMap: {
    update: '修改职位',
    create: '新增职位'
  } as any,
  filterForm: {
    positionName: ''
  }
});
const {
  textMap,
  // positionList,
  dialogFormVisible,
  dialogStatus,
  loading
  // temp
} = toRefs(state);
onMounted(async () => {
  await getList();
});

// 获取页面列表
function getList() {
  state.loading = true;
  fetchPage(state.filterForm).then((res: any) => {
    state.positionList = res.data.rows;
    state.total = res.data.totalRows;
    state.loading = false;
  });
}
function resetTemp() {}
function createData() {}
function updateData() {}
// function createPositionInfo() {
//   state.dialogStatus = 'create';
//   state.dialogFormVisible = true;
//   nextTick(() => {
//     // dataForm.value.clearValidate()
//   });
// }
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 80 },
  { type: 'index', label: '#', width: 80 },
  // 多级 prop
  { prop: 'positionName', label: '职位名称', search: { el: 'input' } },
  { prop: 'positionCode', label: '职位编码', search: { el: 'input' } },
  { prop: 'positionSort', label: '顺序' },
  { prop: 'positionRemark', label: '备注' },
  {
		prop: "positionSort",
		label: "性别",
    tag:true,
		// 直接放字典数据
		// enum: genderType,
		// 字典请求不带参数
		enum: [
      {
        value:1,
        label:'2'
    },
      {
        value:0,
        label:'4'
    }
  ],
		// 字典请求携带参数
		// enum: () => getUserGender({ id: 1 }),
		search: { el: "select", props: { filterable: true } },
		// fieldNames: { label: "genderLabel", value: "genderValue" }
	},
  // { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
];

</script>
<template>
    <div class="table-box">
        <ProTable
          ref="proTable"
          title="用户列表"
          :selectId="'positionId'"
          :columns="columns"
          :requestApi="fetchPage"
        >
        </ProTable>
        <!-- 职位dialog -->
    <dtDialog
      :title="textMap[dialogStatus]"
      v-model:visible="dialogFormVisible"
      :is-loading="loading"
      @closeDialog="resetTemp"
      @comfirmBtn="dialogStatus === 'create' ? createData() : updateData()"
    >
      <template #default> 1234 </template>
    </dtDialog>
    </div>
    
</template>
